import React,{Component} from "react";
import { Picker, List} from 'antd-mobile';
import arrayTreeFilter from 'array-tree-filter';
import districtData  from "./data";
import Headcom from "../../components/header"
import "./add.css"
import {addAddress,getEditAddress} from "../../api/user"

class Index extends Component{
    constructor(props){
        super(props);
        this.state = {
            address:"",
            city:"",
            user:"",
            tel:"",
            pickerValue:[],
            visible:false,
            antdDistrict:[],
            active:false,
            msg:"",
            isShow:false
        }
    }
    
    componentDidMount(){
        getEditAddress(this.props.match.params.id).then(res=>{
            let {address,city,tel,user} = res.data.data;
            this.setState({
                address,city,tel,user,
                antdDistrict:city.split(" ")
            })
        })


        Object.keys(districtData).forEach((index)=>{
            let itemLevel1 ={};
            let itemLevel2 ={};
            itemLevel1.value = districtData[index].code;
            itemLevel1.label = districtData[index].name;
            itemLevel1.children = [];
            let data = districtData[index].cities;
            Object.keys(data).forEach((index)=>{
                itemLevel2.value = data[index].code;
                itemLevel2.label = data[index].name;
                itemLevel2.children = [];
                let data2 = data[index].districts;
                let itemLevel3 ={};
                itemLevel3.children = [];
                Object.keys(data2).forEach((index)=>{
                    itemLevel3.value = index;
                    itemLevel3.label = data2[index];
                    itemLevel2.children.push(itemLevel3);
                    itemLevel3 ={};
                });
                itemLevel1.children.push(itemLevel2);
                itemLevel2 ={};
            });
            this.state.antdDistrict.push(itemLevel1)
        });

        this.setState({
            antdDistrict:this.state.antdDistrict
        })
    }
   
    tipHanld(msg){
        this.setState({
            isShow:true,
            msg:msg
        },()=>{
            setTimeout(()=>{
                this.setState({
                 isShow:false
                })
            },2000)
        })
    }

    saveAddress(){
        const value = this.state.pickerValue;
        if(!value) {
           return'';
        }
        const treeChildren = arrayTreeFilter(this.state.antdDistrict, (c, level) => c.value === value[level]);
        let {user,tel,address,active} = this.state
        let userid = JSON.parse(localStorage.getItem("userinfo")).id
        let city = treeChildren.map(v => v.label).join(' ')
        console.log(city)
        if(user.trim()===""){
            this.tipHanld("请输入用户名")
        }else if(tel.trim()===""){
            this.tipHanld("请输入手机号码")
        }else if(city.trim()===""){
            this.tipHanld("请选择所在地区")
        }else if(address.trim()===""){
            this.tipHanld("请填写详细地址")
        }else{
            addAddress({
                user,tel,address,active,city,userid
            }).then(res=>{
                console.log(res)
            })
        }
    }
    
    render(){
        return(
            <div className="add_address">
                <Headcom title="编辑收货地址"/>
                <div className="form">
                    <p><input placeholder="收货人" value={this.state.user} onChange={(ev)=>{
                        this.setState({
                            user:ev.target.value
                        })
                    }}/></p>
                    <p><input placeholder="手机号码"  value={this.state.tel}  onChange={(ev)=>{
                        this.setState({
                            tel:ev.target.value
                        })
                    }}/></p>   
                    <Picker
                        data={this.state.antdDistrict}
                        value={this.state.pickerValue}
                        onChange={v => this.setState({ pickerValue: v })}
                        onOk={v => this.setState({ pickerValue: v })}
                        onClick={()=>{console.log('xx')}}
                    >
                        <List.Item  
                            onClick={() => this.setState({ visible: true })} 
                            arrow="horizontal">
                            请选择所在地区
                            <i></i>
                        </List.Item>
                    </Picker>
                    <p><input placeholder="详细地址" value={this.state.address}  onChange={(ev)=>{
                        this.setState({
                            address:ev.target.value
                        })
                    }}/></p>  
                </div>

                <p className="setdefault" onClick={()=>{
                     this.setState({
                        active:!this.state.active
                     })
                }}>
                    <i className={this.state.active?"check":""}></i>设为默认地址
                </p>
                <span className="delbtn">删除</span>
                <span className="savebtn" onClick={this.saveAddress.bind(this)}>保存收货地址</span>
                
                {this.state.isShow?<div className="tipmsg"><span>{this.state.msg}</span></div>:null}
                
            </div>
        )
    }
}

export default Index